<!--
 * FilePath     : \src\views\home\components\customerReview.vue
 * Author       : SJZ
 * Date         : 2025-03-24 21:18
 * LastEditors  : SJZ
 * LastEditTime : 2025-04-08 21:29
 * Description  : 客户评价
 * CodeIterationRecord: 
 -->
<template>
  <div class="y-aline-start px-10% mt-50 box-border">
    <h1>Client's <span class="theme-color-primaryFontColor"> Reviews</span></h1>
    <el-carousel class="reviews mt-20" arrow="always" :autoplay="false" trigger="click" indicator-position="none" height="400px">
      <el-carousel-item v-for="(customerReview, index) in customerReviews" :key="index">
        <div class="aline-start wh-full">
          <img :src="customerReview.image" height="100%" width="600" />
          <div class="review-wrap w-700 h-full ml-60 pt-7% box-border">
            <div class="fs-18 min-h-120px">
              {{ customerReview.review }}
            </div>
            <div class="mt-20">
              <span class="fs-24 fw-bold">
                {{ customerReview.name }}
              </span>
              <span class="ml-10 fs-16 theme-color-primaryFontColor">
                {{ customerReview.region }}
              </span>
            </div>
            <div class="mt-20">
              <el-rate v-model="customerReview.evaluationScore" size="large" />
            </div>
            <div class="mt-10">
              {{ customerReview.productModel }}
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script setup lang="ts">
defineProps({
  customerReviews: {
    type: Array as PropType<Record<string, any>[]>,
    require: true
  }
});
</script>
<style lang="scss" scoped>
.reviews.el-carousel {
  :deep(.el-carousel__arrow) {
    width: 36px !important;
    height: 36px !important;
    top: 30px !important;
    &.el-carousel__arrow--left {
      left: auto !important;
      right: 80px !important;
    }
    &.el-carousel__arrow--right {
      right: 30px !important;
    }
    i {
      font-size: 2em !important;
    }
  }
  .review-wrap {
    position: relative;
    &::before {
      color: #307ff9;
      content: "“";
      display: block;
      font-family: Inter-SemiBold, Inter;
      font-size: 17rem;
      font-weight: bold;
      left: -20%;
      position: absolute;
      top: -15%;
    }
  }
}
</style>
